<template>
    <PageView>
        <vxe-table
            ref="tableRef"
            border
            stripe
            keep-source
            min-height="300"
            :loading="routerManagerStore.isLoading"
            :row-config="routerManagerStore.rowConfig"
            :tree-config="routerManagerStore.treeConfig"
            :edit-config="routerManagerStore.editConfig"
            :data="routerManagerStore.tableDataList">
            <vxe-column field="routerPath" title="路由路径" tree-node></vxe-column>
            <vxe-column field="routerName" title="路由名称"></vxe-column>
            <vxe-column field="component" title="路由组件"></vxe-column>

            <vxe-column field="routerDesc" title="描述" :edit-render="{autoFocus: 'input'}">
                <template #edit="{ row }">
                    <vxe-input v-model="row.routerDesc" clearable />
                </template>
            </vxe-column>

            <vxe-column field="isMenuLink" title="是否菜单">
                <template #default="{ row }">
                    <vxe-tag :status="routerManagerStore.getMenuLinkTagStatus(row)">
                        {{ routerManagerStore.getMenuLinkText(row) }}
                    </vxe-tag>
                </template>
            </vxe-column>

            <vxe-column field="menuName" title="菜单名称" :edit-render="{autoFocus: 'input'}">
                <template #default="{ row }">
                    <span>{{ row.menuName }}</span>
                </template>
                <template #edit="{ row }">
                    <template v-if="row.isMenuLink === 1">
                        <vxe-input v-model="row.menuName" clearable />
                    </template>
                    <template v-else>
                        {{ row.menuName }}
                    </template>
                </template>
            </vxe-column>

            <vxe-column title="操作" width="160">
                <template #default="{ row }">
                    <template v-if="hasEditStatus(row)">
                        <vxe-button size="mini" status="danger" @click="saveRowEvent(row)">保存</vxe-button>
                        <vxe-button size="mini" @click="cancelRowEvent(row)">取消</vxe-button>
                    </template>
                    <template v-else>
                        <vxe-button size="mini" status="primary" @click="editRowEvent(row)">编辑</vxe-button>
                    </template>
                </template>
            </vxe-column>
        </vxe-table>
    </PageView>
</template>

<script lang="ts" setup>
import {onMounted, ref} from 'vue'
import {useRouterManagerStore} from "@/store/UseRouterManagerStore.ts";
import {RouterConfigVO} from "@/entiy/vo/RouterConfigVO.ts";
import {VxeTableInstance} from "vxe-pc-ui/types/components/table";

const routerManagerStore = useRouterManagerStore();
const tableRef = ref<VxeTableInstance<RouterConfigVO>>()

onMounted(() => {
    routerManagerStore.getRouterConfigList();
})

/**
 * 判断表格是否处于编辑状态
 *
 * @param row 编辑行的数据
 */
const hasEditStatus = (row: RouterConfigVO) => {
    const $table = tableRef.value
    if ($table) {
        return $table.isEditByRow(row)
    }
}

/**
 * 点击编辑按钮的事件
 *
 * @param row 编辑行的数据
 */
const editRowEvent = (row: RouterConfigVO) => {
    const $table = tableRef.value
    if ($table) {
        $table.setEditRow(row)
    }
}

/**
 * 点击保存按钮的事件
 *
 * @param row 编辑行的数据
 */
const saveRowEvent = (row: RouterConfigVO) => {
    const $table = tableRef.value
    if ($table) {
        // 清除编辑状态
        $table.clearEdit().then(() => {
            // 更新路由配置
            routerManagerStore.updateRouterConfig(row);
        })
    }
}

/**
 * 点击取消按钮的事件
 *
 * @param row 编辑行的数据
 */
const cancelRowEvent = (row: RouterConfigVO) => {
    const $table = tableRef.value
    if ($table) {
        $table.clearEdit().then(() => {
            // 还原行数据，需要 vxe-table 设置 keep-source 属性
            $table.revertData(row)
        })
    }
}
</script>
